<template>
  <!-- 弹出层 -->
  <van-popup v-model="show" position="bottom" round @close="$emit('close', '')">
    <van-form @submit="onSubmit" label-width="60px">
      <van-field v-model="formData.orderOrgName" name="orderOrgName" label="单位" placeholder="请选择单位"
        :rules="[{ required: true }]" required right-icon="arrow" @click="showPickerOrderOrgName = true" />
      <van-field v-model="formData.persons" name="persons" label="人员" placeholder="请选择人员" :rules="[{ required: true }]"
        required right-icon="arrow" @click="showPickerChargePerson = true" />
      <van-button type="info" native-type="submit" class="btn" block round>确认</van-button>
    </van-form>
    <van-popup v-model="showPickerOrderOrgName" position="bottom">
      <van-tree-select :items="orderOrgNameOption" :active-id.sync="formData.orderOrg" @click-nav="handleChange"
        :main-active-index.sync="activeIndex" @click-item="handleConfirmOrderOrgName" />
    </van-popup>
    <selectMultiple v-if="showPickerChargePerson" :optios="chargePersonOption" :ids="formData.personsId"
      @close="onConfirmChargePerson" :keyOption="{ id: 'id', name: 'realname' }" />

  </van-popup>
</template>

<script>
import selectMultiple from "@/components/selectMultiple"
export default {
  name: "selectPerson",
  components: { selectMultiple },
  data() {
    return {
      formData: {
        orderOrgName: "",
        personsId: "",
        persons: ""
      },
      activeIndex: null, //申请单位选中的索引
      orderOrgNameOption: [], // 申请单位
      chargePersonOption: [], // 人员
      show: true,
      showPickerOrderOrgName: false,
      showPickerChargePerson: false,
      // 已选用户 ID 列表
      selectedUserIds: this.ids?.split?.(",") || [],
    };
  },

  mounted() {
    this.handleGetOptios()
  },
  methods: {
    // 提交预约申请  
    onSubmit(values) {
      console.log("values", values);
      this.$emit('close', this.formData)
    },
    // 选择人员
    onConfirmChargePerson(data) {
      this.formData.personsId = data.id;
      this.formData.persons = data.name;
      this.showPickerChargePerson = false;
    },
    // 选择单位
    handleConfirmOrderOrgName(values) {
      console.log("values", values);
      this.formData.orderOrgName = values.departName
      console.log("this.formData", this.formData);
      this.showPickerOrderOrgName = false
      this.$axios({ url: `/sys/user/queryUserByDepId?id=${values.id}` }).then(res => {
        this.chargePersonOption = res || []
      })
    },
    handleGetOptios() {
      // 获取申请单位数据
      this.$axios({ url: '/sys/sysDepart/queryDepartTreeSync' }).then(res => {
        console.log('resorderOrgNameOption', res);
        this.orderOrgNameOption = res?.map(item => ({ ...item, text: item.departName })) || [];
        this.handleChange(0)
        console.log('this.orderOrgNameOption', this.orderOrgNameOption);
      })
    },
    // 根据上级部门id查下级部门
    handleChange(index) {
      console.log('index', index);
      if (!this.orderOrgNameOption[index].isLeaf) {
        this.$axios({ url: `/sys/sysDepart/queryDepartTreeSync?pid=${this.orderOrgNameOption[index].id}` }).then(res => {
          console.log('resorderOrgNameOption', res);
          const children = res?.map(item => ({ ...item, text: item.departName })) || [];
          this.orderOrgNameOption[index].children = children
          this.orderOrgNameOption = [...this.orderOrgNameOption]
          console.log('this.orderOrgNameOption2222', this.orderOrgNameOption);
        })
      }
    },

  }
}
</script>

<style scoped lang="less">
.checkbox-group {
  max-height: 500px;
  overflow: auto;
}
</style>